<template>
  <div class="seller" ref="seller">
    <div>
      <div class="overview">
        <div class="overview-top">
          <div class="left-wrapper">
            <div class="name">{{seller.name}}</div>
            <div class="star-wrapper">
              <star :size="36" :score="seller.score" class="score-star"></star>
              <span class="rating-count">({{seller.ratingCount}})</span>
              <span class="sell-count">月售{{seller.sellCount}}单</span>
            </div>
          </div>
          <div class="right-wrapper" @click="fnFavorite">
            <span class="icon-favorite" :class="favoriteFlg?'on':'off'"></span>
            <span class="favorite">{{favoriteTxt}}</span>
          </div>
        </div>
        <div class="overview-bottom">
          <div class="min-price-wrapper">
            <span class="title">起送价</span>
            <span class="price">{{seller.minPrice}}<span class="unit">元</span></span>
          </div>
          <div class="delivery-price-wrapper">
            <span class="title">商家配送</span>
            <span class="price">{{seller.deliveryPrice}}<span class="unit">元</span></span>
          </div>
          <div class="delivery-time-wrapper">
            <span class="title">平均配送时间</span>
            <span class="price">{{seller.deliveryTime}}<span class="unit">分钟</span></span>
          </div>
        </div>
      </div>
      <div class="split"></div>
      <!-- 公告与活动 -->
      <div class="bulletin-wrapper">
        <h1>公告与活动</h1>
        <div class="content">{{seller.bulletin}}</div>
        <ul class="support-list">
          <li v-for="item in seller.supports" class="support-item">
            <span class="icon" :class="supportIcon[item.type]"></span><span class="desc">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <div class="split"></div>
      <!-- 商家实景 -->
      <div class="pics">
        <h1>商家实景</h1>
        <div class="pic-wrapper" ref="picWrapper">
          <ul class="pic-list" ref="picList">
            <li class="pic-item" v-for="item in seller.pics">
              <img :src="item">
            </li>
          </ul>
        </div>
      </div>
      <div class="split"></div>
      <!-- 商家信息 -->
      <div class="seller-info">
        <h1>商家信息</h1>
        <ul class="info-wrapper">
          <li class="info-item" v-for="item in seller.infos">{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Star from '../star/Star'
  import BScroll from 'better-scroll'

  export default {
    props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        // 优惠图标
        supportIcon: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
        // 收藏文字
        favoriteTxt: '收藏',
        favoriteFlg: false
      }
    },
    watch: {
      seller () {
        // 页面滚动
        this.fnSellerScroll()
        // 商家实景滚动
        this.fnPicScroll()
      }
    },
    components: {
      Star
    },
    methods: {
      // 页面滚动
      fnSellerScroll () {
        this.$nextTick(() => {
          if (!this.sellerScroll) {
            this.sellerScroll = new BScroll(this.$refs.seller, {
              click: true
            })
          } else {
            this.sellerScroll.refresh()
          }
        })
      },
      // 商家实景滚动
      fnPicScroll () {
        if (this.seller.pics) {
          // 计算内层元素的宽度
          let picWidth = 120
          let margin = 6
          let width = (picWidth + margin) * this.seller.pics.length - margin
          this.$refs.picList.style.width = width + 'px'
          this.$nextTick(() => {
            if (!this.picScroll) {
              this.picScroll = new BScroll(this.$refs.picWrapper, {
                scrollX: true,
                eventPassthrough: 'vertical'
              })
            } else {
              this.picScroll.refresh()
            }
          })
        }
      },
      // 收藏
      fnFavorite () {
        this.favoriteFlg = !this.favoriteFlg
        if (this.favoriteFlg) {
          this.favoriteTxt = '已收藏'
        } else {
          this.favoriteTxt = '收藏'
        }
      }
    },
    mounted () {
      // 页面滚动
      this.fnSellerScroll()

      // 商家实景滚动
      this.fnPicScroll()
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../common/scss/mixin";

  .seller {
    position: fixed;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    .split {
      width: 100%;
      height: 16px;
      background: #f3f5f7;
      border-top: 1px solid rgba(7, 17, 27, .1);
      border-bottom: 1px solid rgba(7, 17, 27, .1);
    }
    .overview {
      margin:0 18px;
      .overview-top {
        display: flex;
        justify-content: space-between;
        padding: 18px 0;
        border-bottom: 1px solid rgba(7,17,27,.1);
        .left-wrapper {
          .name {
            font-size: 14px;
            font-weight: 700;
            color: rgb(7,17,27);
            line-height: 14px;
            margin-bottom: 8px;
          }
          .star-wrapper {
            display: flex;
            align-items: center;
            .score-star {
              width: 90px;
              margin-right: 8px;
            }
            .rating-count {
              font-size: 10px;
              color: rgb(77,85,93);
              margin-right: 12px;
            }
            .sell-count {
              font-size: 10px;
              color: rgb(77,85,93);
            }
          }
        }
        .right-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          .icon-favorite {
            font-size: 24px;
            line-height: 24px;
            margin-bottom: 4px;
            &.on {
              color: rgb(240,20,20);
            }
            &.off {
              color: rgb(77,85,93);
            }
          }
          .favorite {
            font-size: 10px;
            color: rgb(77,85,93);
            line-height: 10px;
          }
        }
      }
      .overview-bottom {
        display: flex;
        padding: 18px 0;
        .min-price-wrapper,
        .delivery-price-wrapper,
        .delivery-time-wrapper {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-right: 1px solid rgba(7,17,27,.1);
          .title {
            font-size: 10px;
            color: rgb(147,153,159);
            line-height: 10px;
            margin-bottom: 8px;
          }
          .price {
            font-size: 24px;
            font-weight: 300;
            color: rgb(7,17,27);
            line-height: 24px;
            .unit {
              font-size: 10px;
            }
          }
        }
        .delivery-time-wrapper {
          border-right: none;
        }
      }
    }
    .bulletin-wrapper {
      margin: 18px;
      h1 {
        font-size: 14px;
        font-weight: 700;
        color: rgb(7,17,27);
        line-height: 14px;
      }
      .content {
        font-size: 12px;
        font-weight: 400;
        color: rgb(240,20,20);
        line-height: 24px;
        padding: 8px 12px 16px 12px;
        border-bottom: 1px solid rgba(7,17,27,.1);
      }
      .support-list {
        .support-item {
          display: flex;
          align-items: center;
          padding: 16px 12px;
          border-bottom: 1px solid rgba(7,17,27,.1);
          &:last-child {
            border-bottom: none;
          }
          .icon {
            width: 16px;
            height: 16px;
            background-size: 16px;
            background-repeat: no-repeat;
            margin-right: 6px;
            &.decrease { @include bg-image('./img/decrease_3') }
            &.discount { @include bg-image('./img/discount_3') }
            &.special { @include bg-image('./img/special_3') }
            &.guarantee { @include bg-image('./img/guarantee_3') }
            &.invoice { @include bg-image('./img/invoice_3') }
          }
          .desc {
            font-size: 12px;
            font-weight: 200;
            color: rgb(7,17,27);
            line-height: 16px;
          }
        }
      }
    }
    /* 商家实景 */
    .pics {
      padding: 18px;
      h1 {
        font-size: 14px;
        font-weight: 700;
        color: rgb(7,17,27);
        line-height: 14px;
        margin-bottom: 12px;
      }
      .pic-wrapper {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        .pic-item {
          display: inline-block;
          width: 120px;
          height: 90px;
          margin-right: 6px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    /* 商家信息 */
    .seller-info {
      padding: 18px;
      h1 {
        font-size: 14px;
        font-weight: 700;
        color: rgb(7,17,27);
        line-height: 14px;
        margin-bottom: 12px;
      }
      .info-wrapper {
        .info-item {
          border-top: 1px solid rgba(7,17,27,.1);
          padding: 16px 12px;
          font-size: 12px;
          font-weight: 200;
          line-height: 16px;
          color: rgb(7,17,27);
        }
      }
    }
  }
</style>
